import {ReactElement} from "react";
import {useSortable} from "@dnd-kit/sortable";
import {CSS} from "@dnd-kit/utilities";

type PropsType = {
    id: string
    children: ReactElement
}
export const SortableItem = ({id, children}: PropsType) => {
    const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id})
    const style = {
        transform: CSS.Transform.toString(transform),
        transition
    }
    return (
        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
            {children}
        </div>
    );
};